<script setup>
//成功通过，具体考试安排也是在这里
import axios from 'axios';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '@/router/index.js';
import { showDialog } from 'vant';
import { check } from '@/apis/testAPI';
import { useUrlStore } from '@/stores/url';
const UrlStore = useUrlStore()

const route=new useRoute();
check().then(res => {
    if (res.data.code == 1200) {
        //如果用户没有登录，指向动态登录界面
        var a = document.createElement('a');
        a.setAttribute('href', 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdadd0122365919e8&scope=snsapi_userinfo&response_type=code&redirect_uri=http://175.178.62.164:61803/wxuser/getSignUpUserInfo&expires_in=3600&url=/choose#wechat_redirect');
        a.setAttribute('target', '_blank');
        a.setAttribute('id', 'redict');
        // 防止反复添加
        if (document.getElementById('redict')) {
            document.body.removeChild(document.getElementById('redict'));
        }
        document.body.appendChild(a);
        a.click();
    }
}).catch(err => {
    console.log(err);
})

//封装发起请求的message
const content = ref('暂无');
//获取消息id

const data = ref('');

UrlStore.query_id = route.query.messageId;
if (UrlStore.query_id == undefined || UrlStore.query_id == null) {
    showDialog({
        message: ' 该网页已失效，打开网页失败!!',
    }).then(() => {
        router.push('/index')
    });
}
var formdata = new FormData();
formdata.append('messageId', (UrlStore.query_id));       //不能直接在这里转为整形，必须set重新设置

//定义接受或拒绝函数
const accept = () => {
    content.value = "接受";
    console.log(content.value);
    formdata.append('content', content.value)
    axios({
        url: 'http://175.178.62.164:61803/feedback/submit',
        method: 'post',
        data: formdata,
        withCredentials: true
    }).then(res => {
        console.log(res.data.code);
        if (res.data.code == 0) {               //接受成功
            router.push('/feedBack-A');
        }
        else if (res.data.code == 1001) {                               //提交失败,重复提交
            router.push('/feedBack-Rp');
        }
    })
        .catch(err => {
            console.log(err);
        });
}
const refuse = () => {
    content.value = "拒绝";
    console.log(content);
    formdata.append('content', content.value)
    axios({
        url: 'http://175.178.62.164:61803/feedback/submit',
        method: 'post',
        data: formdata,
        withCredentials: true
    }).then(res => {
        console.log(res.data.code);
        if (res.data.code == 0) {               //拒绝成功
            router.push('/feedBack-R');
        }
        else if (res.data.code == 1001) {                               //提交失败,重复提交
            router.push('/feedBack-Rp');
        }
    })
        .catch(err => {
            console.log(err);
        });
}



//获取信息api
axios({
    url: 'http://175.178.62.164:61803/message/detail',
    method: 'post',
    data: formdata,
    withCredentials: true
}).then(res => {
    if (res.data.code == 401) {
        showDialog({
            message: ' 获取信息失败!!',
        }).then(() => {
            router.push('/index')
        }).catch(() => {
            console.log('失败');
        });
    }
    else if (res.data.code == 403) {
        showDialog({
            message: ' 获取信息失败!!',
        }).then(() => {
            router.push('/index')
        }).catch(() => {
            console.log('失败');
        });
    }

    if (res.data.code == 0) {
        data.value = res.data.data;            //赋值
        console.log(data.value);
    }
}).catch(err => {
    console.log(err);
});

//倒计时效果
const hours = ref('00')
const minutes = ref('00')
const seconds = ref('00')

function getCountTime() {
    //获取当前时间的时间戳
    const now = +new Date()

    //获取消息发送时间的时间戳
    const messageTime = +new Date(data.value.createTime.replace(/-/g, '/'))

    //(now - messageTime) / 1000得到过去了多少时间（单位是秒），再用data.value.deadline*3600000与其相减即可得到剩余时间
    const remain = data.value.deadline * 3600 - (now - messageTime) / 1000

    //将时间转化成时分秒
    seconds.value = parseInt(remain % 60) >= 10 ? parseInt(remain % 60) : '0' + parseInt(remain % 60)
    minutes.value = parseInt(remain / 60 % 60) >= 10 ? parseInt(remain / 60 % 60) : '0' + parseInt(remain / 60 % 60)
    hours.value = parseInt(remain / 60 / 60 % 24) >= 10 ? parseInt(remain / 60 / 60 % 24) : '0' + parseInt(remain / 60 / 60 % 24)

    if (parseInt(remain % 60) < 0 || parseInt(remain / 60 % 60) < 0 || parseInt(remain / 60 / 60 % 24) < 0) {
        clearInterval(timer)
        showDialog({
            message: ' 该网页已失效，打开网页失败!!',
        }).then(() => {
            router.push('/index')
        });
    }
}

//利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒
let timer = setInterval(() => {
    getCountTime()
}, 1000)


</script>

<template>
    <div class="box">
        <div class="main_box">
            <div class="box1">
                <p class="p1">{{ data.title }}</p>
                <p class="p2">{{ data.content }}</p>
            </div>
            <van-dialog v-model:show="show"></van-dialog>
            <div class="button">
                <van-button type="success" class="first_line" @click="accept()">接受</van-button>
                <van-button type="primary" class="first_line" @click="refuse()">拒绝</van-button>
                <van-button type="default" class="second_line" to="/question">特殊情况点我上报</van-button>
            </div>
            <div class="notice">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-warning"></use>
                </svg>
                <p class="waring">此页面{{ hours }}:{{ minutes }}:{{ seconds }}后失效!!</p>
            </div>
        </div>
    </div>
</template>

<style scoped>
.box {
    background-image: linear-gradient(#4993fa,
            #9dc6ff,
            #a0e4f1,
            #f1fafb);
    height: 100vh;
}

.main_box {
    position: relative;
    top: 50px;
}

.box1 {
    box-sizing: border-box;
    background-color: white;
    width: 325px;
    max-height: 60vh;
    margin: 0 auto 20px auto;
    padding: 0 20px;
    box-shadow: 7px 7px 10px #535353;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.first_line {
    margin: 10px 10px;
    width: 120px;
}

.second_line {
    margin-top: 10px;
    width: 220px;
}

.button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.p1 {
    padding: 30px;
    margin: 0;
    text-align: center;
    font-size: 20px;
}

.p2 {
    padding: 0 0 30px 0;
    text-align: center;
    font-size: 18px;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.notice {
    display: flex;
    padding-left: 70px;
}

.icon {
    width: 3em;
    height: 2em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    position: relative;
    top: 30px;
}

.waring {
    padding-top: 20px;
    font-size: 17px;
    color: red;
}
</style>